<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.msg">
        <router-link :to="'/home/newsinfo'+item.id">
          <img
            class="mui-media-object mui-pull-left"
            src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          />
          <div class="mui-media-body">
            {{item.name}}
            <p class="mui-ellipsis">{{item.tag}}</p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      newslist: []
    };
  },
  created() {
    //只要进到页面就执行getnews()方法
    this.getnews();
  },
  methods: {
    getnews() {
      this.$http
        .get("https://api.oioweb.cn/api/Memu.php?key=鱼")
        .then(result => {
          if (result.body.code == 1) {
            console.log("获取newslist成功");
            this.newslist = result.body.data.list;
          } else {
            console.log("获取newslist失败");
            Toast("获取数据失败");
          }
        });
    }
  }
};
</script>
<style scoped>
.mui-ellipsis {
  display: flex;
  justify-content: space-between;
}
</style>